import styled from "styled-components";

export const ButtonStyling = styled.button`
  --size: 1.5rem;
  cursor: pointer;
  border: 0;
  background-image: url("/scripts/dist/toolbar/images/icon-desktop.svg");
  background-repeat: no-repeat;
  background-size: calc(var(--size) - 0.15rem);
  background-position: center;
  background-color: initial;
  font-size: 1px;
  color: rgba(0, 0, 0, 0);
  line-height: 1;
  display: block;
  width: var(--size);
  height: var(--size);
  border-radius: 0.25rem;
  outline: none;

  &[data-mode='tablet'] {
    background-image: url("/scripts/dist/toolbar/images/icon-tablet.svg");
  }

  &[data-mode='mobile'] {
    background-image: url("/scripts/dist/toolbar/images/icon-mobile.svg");
  }

  &[data-mode='reset'] {
    background-image: url("/scripts/dist/toolbar/images/icon-reset.svg");
  }

  &[data-active='true'] {
    background-color: #CBD5E0;
  }
`;

export const ResponsiveOptionsDropdown = styled.ul`
  list-style: none;
  padding: 4px;
  position: absolute;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 2px 2px 4px 0 #ccc;
  border-radius: 4px;
  transform: translateX(-50%);
  left: 50%;
  margin: 0.25rem 0 0;

  li {
    margin-bottom: 2px;

    a {
      display: block;
      padding: 0.5rem 1rem;
      cursor: pointer;
      color: #14181F;
      border-radius: 4px;

      &:hover, &:focus {
        background-color: #EDF2F7;
      }

      &.active {
        background-color: #cbd5e0;
      }
    }
  }
`;

export const ResponsiveButtonStyle = styled.div`
  position: relative;
`;