@import '../animation/variables.scss';

$name: 'ivue-date-picker-month';

:root {
  --#{$name}-padding: 0 12px 12px 12px;
  --#{$name}-height: 248px;

  // table
  --#{$name}-table-td-height: 56px;
  --#{$name}-table-td-button-max-width: 160px;
  --#{$name}-table-td-button-min-width: 40px;

  // color
  --#{$name}-button-color: rgba(0, 0, 0, 0.87);
}

.#{$name} {
  position: relative;
  padding: var(--#{$name}-padding);
  height: var(--#{$name}-height);

  table {
    table-layout: fixed;
    width: 100%;
    transition: $ivue-transition-default;
  }

  &--table {
    td {
      position: relative;
      height: var(--#{$name}-table-td-height);
      vertical-align: middle;
      text-align: center;

      button {
        margin: 0 auto;
        max-width: var(--#{$name}-table-td-button-max-width);
        min-width: var(--#{$name}-table-td-button-min-width);
        width: 100%;
        color: var(--#{$name}-button-color);
      }
    }
  }
}