.container-UpMfL6FP {
    border-radius: var(--base-ticker-card-skeleton-container-border-radius, 8px);
    margin: var(--base-ticker-card-skeleton-container-margin, 0 -12px);
    padding: var(--base-ticker-card-skeleton-container-padding, 8px 12px);
    position: relative
}

@media (any-hover:hover) {
    .container-UpMfL6FP:hover {
        background-color: var(--color-bg-primary-hover)
    }
}

.container-kgguEWye {
    align-items: center;
    display: grid;
    flex-flow: row nowrap;
    gap: 4px 8px;
    grid-template-areas: "logo link price" "logo shortName change";
    grid-template-columns: 36px 1fr 1fr
}

.containerWithoutLogo-kgguEWye {
    grid-template-areas: "link price" "shortName change";
    grid-template-columns: 1fr 1fr
}

.containerWithoutLogo-kgguEWye .logo-kgguEWye {
    display: none
}

.logo-kgguEWye {
    background-color: var(--color-container-fill-primary-neutral-extra-light);
    border-radius: 50%;
    grid-area: logo;
    height: 36px;
    width: 36px
}

.link-kgguEWye {
    background-color: var(--color-container-fill-primary-neutral-extra-light);
    border-radius: 4px;
    grid-area: link;
    height: 24px;
    position: unset !important;
    width: 50%
}

.link-kgguEWye,
.link-kgguEWye:visited {
    color: var(--color-text-primary);
    fill: var(--color-text-primary)
}

@media (any-hover:hover) {
    .link-kgguEWye:hover {
        color: var(--color-text-primary);
        fill: var(--color-text-primary)
    }
}

.link-kgguEWye:active {
    color: var(--color-text-primary);
    fill: var(--color-text-primary)
}

.link-kgguEWye:focus {
    outline: auto;
    outline-offset: 2px
}

.link-kgguEWye:focus-visible {
    outline: auto;
    outline-offset: 2px
}

.link-kgguEWye:focus:not(:focus-visible) {
    outline: none
}

.link-kgguEWye {
    outline: none;
    overflow: visible;
    position: relative
}

.link-kgguEWye:focus {
    outline: none
}

.link-kgguEWye:focus-visible {
    outline: none
}

.link-kgguEWye:after {
    border-style: solid;
    border-width: 2px;
    box-sizing: border-box;
    content: "";
    display: none;
    height: calc(100% + 10px);
    inset-inline-start: -5px;
    pointer-events: none;
    position: absolute;
    top: -5px;
    width: calc(100% + 10px);
    z-index: 1
}

.link-kgguEWye:focus:after {
    display: block
}

.link-kgguEWye:focus-visible:after {
    display: block
}

.link-kgguEWye:focus:not(:focus-visible):after {
    display: none
}

.link-kgguEWye:after {
    border-color: var(--color-focus-outline-color-blue);
    border-radius: 12px
}

.shortName-kgguEWye {
    background-color: var(--color-container-fill-primary-neutral-extra-light);
    border-radius: 4px;
    grid-area: shortName;
    height: 24px;
    width: 30%
}

.price-kgguEWye {
    grid-area: price;
    width: 50%
}

.change-kgguEWye,
.price-kgguEWye {
    background-color: var(--color-container-fill-primary-neutral-extra-light);
    border-radius: 4px;
    height: 24px;
    margin-inline-start: auto
}

.change-kgguEWye {
    grid-area: change;
    width: 30%
}

.container-O1I2lA8a {
    align-items: center;
    display: grid;
    flex-flow: row nowrap;
    gap: 4px 8px;
    grid-template-areas: "logo link price" "logo shortName change";
    grid-template-columns: 36px 1fr 1fr
}

@media (min-width:768px) {
    .container-O1I2lA8a {
        grid-template-areas: "logo link price change" "logo shortName price change";
        grid-template-columns: 36px 1fr 1fr 147px
    }
}

.containerWithoutLogo-O1I2lA8a {
    grid-template-areas: "link price" "shortName change";
    grid-template-columns: 1fr 1fr
}

.logo-O1I2lA8a {
    background-color: var(--color-container-fill-primary-neutral-extra-light);
    border-radius: 50%;
    grid-area: logo;
    height: 36px;
    width: 36px
}

.link-O1I2lA8a {
    background-color: var(--color-container-fill-primary-neutral-extra-light);
    border-radius: 4px;
    grid-area: link;
    height: 24px;
    position: unset !important;
    width: 50%
}

.link-O1I2lA8a,
.link-O1I2lA8a:visited {
    color: var(--color-text-primary);
    fill: var(--color-text-primary)
}

@media (any-hover:hover) {
    .link-O1I2lA8a:hover {
        color: var(--color-text-primary);
        fill: var(--color-text-primary)
    }
}

.link-O1I2lA8a:active {
    color: var(--color-text-primary);
    fill: var(--color-text-primary)
}

.link-O1I2lA8a:focus {
    outline: auto;
    outline-offset: 2px
}

.link-O1I2lA8a:focus-visible {
    outline: auto;
    outline-offset: 2px
}

.link-O1I2lA8a:focus:not(:focus-visible) {
    outline: none
}

.link-O1I2lA8a {
    outline: none;
    overflow: visible;
    position: relative
}

.link-O1I2lA8a:focus {
    outline: none
}

.link-O1I2lA8a:focus-visible {
    outline: none
}

.link-O1I2lA8a:after {
    border-style: solid;
    border-width: 2px;
    box-sizing: border-box;
    content: "";
    display: none;
    height: calc(100% + 10px);
    inset-inline-start: -5px;
    pointer-events: none;
    position: absolute;
    top: -5px;
    width: calc(100% + 10px);
    z-index: 1
}

.link-O1I2lA8a:focus:after {
    display: block
}

.link-O1I2lA8a:focus-visible:after {
    display: block
}

.link-O1I2lA8a:focus:not(:focus-visible):after {
    display: none
}

.link-O1I2lA8a:after {
    border-color: var(--color-focus-outline-color-blue);
    border-radius: 12px
}

.shortName-O1I2lA8a {
    background-color: var(--color-container-fill-primary-neutral-extra-light);
    border-radius: 4px;
    grid-area: shortName;
    height: 24px;
    width: 30%
}

.price-O1I2lA8a {
    grid-area: price
}

.change-O1I2lA8a,
.price-O1I2lA8a {
    background-color: var(--color-container-fill-primary-neutral-extra-light);
    border-radius: 4px;
    height: 24px;
    margin-inline-start: auto;
    width: 50%
}

.change-O1I2lA8a {
    grid-area: change
}