diff --git a/packages/styles/scss/components/tile/_tile.scss b/packages/styles/scss/components/tile/_tile.scss index 2d6a43c7f58e..3e945fd18311 100644 --- a/packages/styles/scss/components/tile/_tile.scss +++ b/packages/styles/scss/components/tile/_tile.scss @@ -15,6 +15,7 @@ @use '../../type' as *; @use '../../utilities/ai-gradient' as *; @use '../../utilities/button-reset'; +@use '../../utilities/convert'; @use '../../utilities/component-reset'; @use '../../utilities/focus-outline' as *; @use '../../utilities/high-contrast-mode' as *; @@ -131,8 +132,10 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem); .#{$prefix}--tile--clickable.#{$prefix}--link--disabled .#{$prefix}--tile--disabled-icon { position: absolute; - inset-block-end: layout.density('padding-inline'); - inset-inline-end: layout.density('padding-inline'); + block-size: convert.to-rem(20px); + inline-size: convert.to-rem(20px); + inset-block-end: convert.to-rem(12px); + inset-inline-end: convert.to-rem(12px); } .#{$prefix}--tile--clickable .#{$prefix}--tile--icon { @@ -297,8 +300,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem); .#{$prefix}--tile-content__below-the-fold { display: block; opacity: 0; - transition: - opacity $duration-fast-02 motion(standard, productive), + transition: opacity $duration-fast-02 motion(standard, productive), visibility $duration-fast-02 motion(standard, productive); visibility: hidden; } @@ -313,8 +315,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem); .#{$prefix}--tile-content__below-the-fold { opacity: 1; - transition: - opacity $duration-fast-02 motion(standard, productive), + transition: opacity $duration-fast-02 motion(standard, productive), visibility $duration-fast-02 motion(standard, productive); visibility: inherit; @@ -434,8 +435,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem); @include ai-popover-gradient('default', 0, 'layer'); border: 1px solid transparent; - box-shadow: - inset 0 -80px 70px -65px $ai-inner-shadow, + box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow, 0 4px 8px 0 $ai-drop-shadow; } @@ -461,8 +461,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem); .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before { @include ai-popover-gradient('hover', 0, 'layer'); - box-shadow: - inset 0 -80px 70px -65px $ai-inner-shadow, + box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow, 0 4px 10px 2px $ai-drop-shadow; } @@ -480,8 +479,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem); .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after { @include ai-popover-gradient('selected', 0, 'layer'); - box-shadow: - inset 0 -80px 70px -65px $ai-inner-shadow, + box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow, 0 4px 8px 0 $ai-drop-shadow; }