@import '../_variables';
@import '../_mixins';

.@{prefix}filter-button-wrapper {
  display: flex;

  &[class*='@{prefix}filter-button-row'] {
    .@{prefix}filter-button {
      // 大盘
      .modify('mode', 'dashboard', {
        margin-right: 16px;
      });
      // 大屏
      .modify('mode', 'screen', {
        margin-right: 32px;
      });

      &:last-child {
        margin-right: 0;
      }
    }
  }

  &[class*='@{prefix}filter-button-column'] {
    .@{prefix}filter-button {
      // 大盘
      .modify('mode', 'dashboard', {
        margin-bottom: 16px;
      });
      // 大屏
      .modify('mode', 'screen', {
        margin-bottom: 32px;
      });

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .@{prefix}filter-button {
    min-width: 100px;
    min-height: 32px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: all .25s;
    background-color: var(--color5-4);
    color: var(--color5-1);

    // 大盘
    .modify('mode', 'dashboard', {
      padding: 0 16px;
    });
    // 大屏
    .modify('mode', 'screen', {
      padding: 0 32px;
    });

    &:hover,
    &.selected {
      background-color: var(--color5-5);
      color: var(--color5-2);
    }
  }
}