#country-shipping-details {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1;
  font-size: 0.9rem;
  background: inherit;

  .icon { height: 1.5rem; }
  .nowrap { white-space: nowrap; }

  #country-shipping-details__quote {
    font-size: 0.9rem;
    margin: 0 0.5rem;
  }

  .country-selector {
    --_border: var(--border, 1px solid #8883);
    --_radius: var(--radius, 0.25rem);
    --_spacing: var(--spacing, 0.25rem);
    --_spacing-l: calc(2 * var(--_spacing));
    --_spacing-s: calc(0.5 * var(--_spacing));
    --accent: var(--ast-global-color-0, #39f);
    
    display: inline-block;
    cursor: pointer;
    position: relative;
    background: inherit;

    .panel {
        display: none;
        position: absolute;
        top: 100%;
        margin-top: 0.125rem;
        border: var(--_border);
        border-radius: var(--_radius);
        overflow: hidden;
        background: var(--background, inherit);
        z-index: 1;
    }

    .selected:focus + .panel,
    .panel:focus-within,
    .panel:hover { display: block; }

    .search {
        background: var(--background, inherit);
        padding: var(--_spacing-l);
        border: none;
        width: 100%;
        font: inherit;
        color: inherit;
        box-sizing: border-box;
        border-bottom: var(--_border);
        outline: none;
    }

    .list {
        margin: 0;
        padding: var(--_spacing-s) 0;
        min-width: var(--panel-min-width, 15rem);
        list-style: none;
        overflow: auto;
        max-height: var(--panel-max-height, 15rem);

        &:empty::before {
        display: block;
        content: 'Country not found';
        opacity: 0.25;
        text-align: center;
        padding: 1rem;
        }
    }

    .selected,
    li label {
        display: flex;
        align-items: center;
        gap: var(--_spacing-l);
        padding: var(--_spacing-l);
        cursor: pointer;
        line-height: 1;

        input { display: none; }
        .flag { height: 1rem; }
    }

    .selected {
        /* border: var(--_border); */
        border-radius: var(--_radius);
        padding: 0 var(--_spacing-l);
        background: var(--background, inherit);
        outline: 0;

        &::after {
            content: '';
            display: block;
            height: 0.25em;
            width: 0.25em;
            border: 1px solid currentcolor;
            border-width: 0 1px 1px 0;
            transform: rotate(45deg);
            margin: -0.125rem 0.25rem 0;
            opacity: 0.5;
        }

        .name {
            padding: var(--_spacing-l) 0;
            max-width: var(--selected-max-width);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }

    li label:hover { background: var(--accent); }
    }

}