@import 'mixins';
@import 'components/header';
@import 'variables';

:host {
  display: block;
}

.bottomsheet__btn {
    margin-top: 1em;
    padding: 1em 2em;
    border: none;
    border-radius: 5px;
    background-color: $primary-color;
    font-weight: bold;
    box-shadow: $box-shadow;
}

.header {
    &.sticky {
        position: sticky;
        top: 0;
        background-color: white;
        z-index: 1;
        width: calc(100% + 2em);
        margin-left: -1em;
        padding: 1em 1em;
        box-sizing: border-box;
        box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
    }
}

.artist {
    max-width: 1024px;
    position: relative;


    .header__title {
        text-transform: capitalize;
        width: 100;
        font-size: 2em;
    }

    &__container {
        margin-top: 2em;
    }

    &__container__grid {
        &::after {
            content: "";
            flex: auto;
          }
    }

    &__button {
        margin-top: 2em;
        background: #D8D8D8;
        border-radius: 23.5px;
        font-size: 16px;
        color: #090909;
        text-align: center;
        padding: 1em 2em;
        border: none;
        font-weight: bold;
        &:hover {
            border: none;
            cursor: pointer;
        }
    }

    &__nav--desktop {
        display: none;
    }
}

@include desktop {
    .artist {
        margin: 0 auto;

        &__nav--desktop {
            display: block;
        }

        .bottomsheet__btn {
          display: none;
        }

        .header__title {
          font-size: 3em;
      }

    }
}
